// src/components/KLineChart.jsx

import React, { useRef, useEffect } from 'react';
import { init } from 'klinecharts';


function KLineChart({ data, symbol = 'K-Line Chart', style = {} }) {
  // 1. 创建一个 ref 来引用图表容器 DOM 元素
  const chartRef = useRef(null);
  // 2. 创建一个 ref 来持有 klinecharts 的实例，避免组件重新渲染时丢失实例
  const klineChartInstance = useRef(null);

  // 3. useEffect 用于初始化图表和清理
  useEffect(() => {
    // 确保容器元素已经挂载到 DOM
    if (chartRef.current) {
      // 初始化图表
      const chart = init(chartRef.current);
      const styleGrid = {
        grid: {
          show: false, 
        },
        candle: {
          type:'candle_up_stroke',
          bar: {
            // 'current_open' | 'previous_close'
            compareRule: 'current_open',
            upColor: '#ff0000',
            downColor: '#43b5d5',
            noChangeColor: '#ff0000',
            upBorderColor: '#ff0000',
            downBorderColor: '#43b5d5',
            noChangeBorderColor: '#ff0000',
            upWickColor: '#ff0000',
            downWickColor: '#43b5d5',
            noChangeWickColor: '#888888'
          },
          
        },
        indicator: {
          // ohlc: {
          //   // 'current_open' | 'previous_close'
          //   compareRule: 'current_open',
          //   upColor: 'rgba(45, 192, 142, .7)',
          //   downColor: 'rgba(249, 40, 85, .7)',
          //   noChangeColor: '#888888'
          // },
          type:'candle_up_stroke',
          bars: [{
            // 'fill' | 'stroke' | 'stroke_fill'
            
            style: 'fill',
            // 'solid' | 'dashed'
            borderStyle: 'solid',
            borderSize: 1,
            borderDashedValue: [2, 2],
            downColor: '#43b5d5',
            upColor: 'rgba(249, 40, 85, .7)',
            noChangeColor: '#ff0000'
          }],
        }
      };
      chart.setStyles(styleGrid);
      // 添加MA指标并设置颜色
//       chart.createIndicator({
//   name: 'MA',
//   calcParams: [5, 10, 20, 30],
//   styles: {
//     ma5: { color: '#FF6B6B' },   // 5日均线
//     ma10: { color: '#48DBFB' },  // 10日均线
//     ma20: { color: '#C780E8' },  // 20日均线
//     ma30: { color: '#5DD169' }   // 30日均线
//   }
// });



      klineChartInstance.current = chart;
      console.log('图表实例初始化完成:', chart);

      // 创建默认的技术指标
      // 'VOL' (成交量) 是一个独立的窗口，所以第二个参数为 true
      chart.createIndicator('VOL', true);
      chart.createIndicator('MA', true, { id:'candle_pane' })
      // 'MA' (均线) 会在主图上显示，所以第二个参数为 false
      // chart.createIndicator('MA', false);

      // 清理函数：在组件卸载时销毁图表实例，防止内存泄漏
      return () => {
        if (klineChartInstance.current) {
          klineChartInstance.current.destroy();
        }
      };
    }
  }, []); // 空依赖数组意味着这个 effect 只在组件首次挂载时运行一次

  // 4. useEffect 用于处理数据更新
  useEffect(() => {
    console.log('data', data)
    // 确保有数据传入,则将K线数据转化成klinecharts需要的格式
    if (data && data.candles && data.candles.length > 0) {  
      const klineData = data.candles.map((item, index) => {
        return {
          timestamp: new Date(data.dates[index]).getTime(),
          open: item.open,
          high: item.high,
          low: item.low,
          close: item.close,
          volume: item.amount,
        }
      });
      console.log('klineData', klineData)
      if (klineChartInstance.current) {
        // 使用 applyNewData 方法加载新的 K 线数据
        klineChartInstance.current.applyNewData(klineData);
    }
    }else{
      return;
    }

    // 确保图表实例存在并且有数据传入
    
  }, [data]); // 当 `data` prop 变化时，这个 effect 会重新执行

  // 5. useEffect 用于处理窗口大小变化
  useEffect(() => {
    const handleResize = () => {
      if (klineChartInstance.current) {
        klineChartInstance.current.resize();
      }
    };

    // 监听窗口的 resize 事件
    window.addEventListener('resize', handleResize);

    // 清理函数：在组件卸载时移除事件监听
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // 空依赖数组意味着监听器只添加和移除一次

  // 6. 渲染图表容器
  return (
    <div style={{ width: '100%', ...style }}>
      <h3 style={{ textAlign: 'center', padding: '10px' }}>{symbol}</h3>
      <div
        ref={chartRef}
        style={{
          width: '100%',
          height: '500px', // 给一个默认高度
          ...style, // 允许通过 props 覆盖样式
        }}
      />
    </div>
  );
}

export default KLineChart;
